<template>
  <a-card title="个人资料" :loading="spinning">
    <a-form-model
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="头像">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :action="uploadUrl"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img width="102" height="102" v-if="form.image" :src="form.image" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              头像
            </div>
          </div>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="用户名">
        <a-input disabled v-model="form.phone" style="width: 350px" />
      </a-form-model-item>
      <a-form-model-item label="性别">
        <a-radio-group v-model="form.sex">
          <a-radio :value="1">
            男
          </a-radio>
          <a-radio :value="2">
            女
          </a-radio>
          <a-radio :value="0">
            保密
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="生日">
        <a-date-picker v-model="form.birthday" @change="onChangeDate" />
      </a-form-model-item>
      <a-form-model-item label="所在地区">
        <a-select style="width:110px;margin-right:5px;" v-model="form.province" @change="getCity(1)">
          <a-select-option v-for="item in province" :key="item.id" :value="parseInt(item.id)">
            {{ item.fullname }}
          </a-select-option>
        </a-select>
        <a-select style="width:110px;margin-right:5px;" v-model="form.city" @change="getCity(2)">
          <a-select-option v-for="item in city" :key="item.id" :value="parseInt(item.id)">
            {{ item.fullname }}
          </a-select-option>
        </a-select>
        <a-select style="width:110px;margin-right:5px;" v-model="form.area">
          <a-select-option v-for="item in area" :key="item.id" :value="parseInt(item.id)">
            {{ item.fullname }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="详细地址">
        <a-input v-model="form.address" style="width: 350px" />
      </a-form-model-item>
      <a-form-model-item label="邮箱">
        <a-input v-model="form.email" style="width: 350px" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
        <a-button type="danger" @click="onSubmit">
          提交
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import moment from 'moment'
import apis from '@/api'
import * as getMy from '@/api/login'
import { Cascader } from 'ant-design-vue'
import { editInfo, getDistrict } from '@/api/my'

export default {
  components: {
    Cascader
  },
  name: 'Account',
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { offset: 1, span: 14 },
      form: {},
      loading: false,
      options: [],
      birthday: '',
      uploadUrl: apis.Upload,
      spinning: false,
      defaultValue: [],
      province: '',
      city: '',
      area: ''
    }
  },
  created () {
    getDistrict(0).then(res => {
      this.province = res.result.list
    }).finally(() => {
      this.getUserInfo()
    })
  },
  methods: {
    moment,
    getUserInfo () {
      const app = this
      getMy.getInfo().then(res => {
        const info = res.result.userInfo
        app.spinning = true
        app.form = info
        if (app.form.province !== 0) {
          getDistrict(app.form.province).then(res => {
            this.city = res.result.list
          })
        }
        if (app.form.city !== 0) {
          getDistrict(app.form.city).then(res => {
            this.area = res.result.list
          })
        }
        if (app.form.birthday === '') {
          app.form.birthday = null
        } else {
          app.form.birthday = moment(res.result.userInfo.birthday, 'YYYY/MM/DD')
        }
        app.spinning = false
      })
    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.form.image = info.file.response.data
        this.loading = false
      }
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    loadData (selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      targetOption.loading = true
      getDistrict(targetOption.id)
        .then(res => {
          const list = res.result.list
          targetOption.loading = false
          if (this.level === 2) {
            for (const k in list) {
              list[k].isLeaf = true
            }
          } else {
            for (const k in list) {
              list[k].isLeaf = false
            }
          }
          targetOption.children = list
          this.options = [...this.options]
        })
    },
    onChange (value, selectedOptions) {
      const app = this
      app.level = value.length
      for (const k in selectedOptions) {
        if (k === '0') {
          app.form['province'] = selectedOptions[k].fullname
        }
        if (k === '1') {
          app.form['city'] = selectedOptions[k].fullname
        }
        if (k === '2') {
          app.form['area'] = selectedOptions[k].fullname
        }
      }
    },
    getCity (lv) {
      if (lv === 1) {
        this.city = []
        this.form.city = ''
        this.area = []
        this.form.area = ''
        getDistrict(this.form.province).then(res => {
          this.city = res.result.list
        })
      }
      if (lv === 2) {
        this.area = []
        this.form.area = ''
        getDistrict(this.form.city).then(res => {
          this.area = res.result.list
        })
      }
    },
    onSubmit () {
      const app = this
      app.form.birthday = app.birthday
      editInfo(app.form).then(res => {
        this.$message.success('编辑信息成功')
        this.getUserInfo()
      })
    },
    onChangeDate (date, dateString) {
      this.birthday = dateString
    }
  }
}
</script>

<style scoped>

</style>
